import pageStyles from '@/common/pageLayout.less';
import { getColorTextLoadMap, onMouseOutBtn } from '.';
import { ItemType } from 'antd/lib/menu/hooks/useItems';
import { Fragment } from 'react';
import { Button, Dropdown } from 'antd';
import { UnorderedListOutlined, UpCircleOutlined, DownCircleOutlined } from '@ant-design/icons';
import { ManageCommonAPI } from '@/pages/type';

/** 修改记录表格columns */
export const modifyTableColumns = [
  {
    title: '修改字段',
    key: 'fieldName',
    dataIndex: 'fieldName',
    width: 160,
    ellipsis: true,
    render: (text: string | null) => {
      return <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>;
    },
  },
  {
    title: '修改前',
    key: 'oldValue',
    dataIndex: 'oldValue',
    width: 260,
    ellipsis: true,
    render: (text: string | null) => {
      let newText: string | null = text;
      if (text && text?.includes('||')) {
        newText = getColorTextLoadMap(text)?.colorText;
      }
      return (
        <span style={{ color: '#000' }} className={pageStyles['over-flow-hidden']}>
          {newText ? newText : '--'}
        </span>
      );
    },
  },
  {
    title: '修改后',
    key: 'newValue',
    dataIndex: 'newValue',
    width: 260,
    ellipsis: true,
    render: (text: string | null) => {
      let newText: string | null = text;
      if (text && text?.includes('||')) {
        newText = getColorTextLoadMap(text)?.colorText;
      }
      return (
        <span style={{ color: '#ff3700' }} className={pageStyles['over-flow-hidden']}>
          {newText ? newText : '--'}
        </span>
      );
    },
  },
];

/** 表格更多按钮配置 */
export const tableMoreBtnConfig = (otherConfig: ManageCommonAPI.TableMoreBtnConfigApi[], record: Record<string, any>) => {
  /** 一个按钮都没有时展示*/
  const Disable = (
    <Fragment key={record?.id + '--Disable'}>
      <Button style={{ color: '#000' }} className="manageBtntTxtStyle" type={'link'} size={'small'} disabled>
        --
      </Button>
    </Fragment>
  );

  const allBtnList: Record<string, any>[] = otherConfig?.filter((itemAll: any) => itemAll?.isVisible);

  let outsideList: any = [];
  let otherBtnList: any = [];
  allBtnList?.forEach((item: any, index: number) => {
    if (allBtnList?.length == 3) {
      const btnDomOut: any = (
        <Button
          className={`manageBtntTxtStyle ${item?.clickType == 'onCancel' || item?.clickType == 'onInvalid' ? 'manageColorRedBtn' : ''}`}
          key={index + item?.clickType}
          onClick={() => {
            item?.clickFnc?.[item?.clickType](record);
          }}
          type={'link'}
          size={'small'}
          icon={item?.icon}
        >
          {item?.btnName}
        </Button>
      );
      outsideList?.push(btnDomOut);
    } else if (index > 1) {
      const btnDom: any = (
        <div
          key={index + item?.clickType}
          onClick={() => {
            item?.clickFnc?.[item?.clickType](record);
          }}
        >
          <a>
            {item?.icon}
            &nbsp;{item?.btnName}
          </a>
        </div>
      );
      otherBtnList?.push(btnDom);
    } else {
      const btnDomOut: any = (
        <Button
          className={`manageBtntTxtStyle ${
            item?.clickType == 'onCancel' || item?.clickType == 'onInvalid' || item?.clickType == 'onRevoke' ? 'manageColorRedBtn' : ''
          }`}
          key={index + item?.clickType}
          onClick={() => {
            item?.clickFnc?.[item?.clickType](record);
          }}
          type={'link'}
          size={'small'}
          icon={item?.icon}
        >
          {item?.btnName}
        </Button>
      );
      outsideList?.push(btnDomOut);
    }
  });

  const dropdownItem = (): ItemType[] => {
    const nowBtnList: ItemType[] = [];
    otherBtnList?.forEach((item: any) => {
      if (item) {
        nowBtnList?.push({
          label: item,
          key: `btn-${Math.random()}`,
        });
      }
    });
    return nowBtnList;
  };

  const moreBtn =
    otherBtnList?.length > 0 ? (
      <Fragment key={'table-other-btnUnorderedListOutlined'}>
        <Dropdown
          menu={{
            items: dropdownItem(),
          }}
          placement="bottomLeft"
        >
          <Button className="manageBtntTxtStyle" type={'link'} size={'small'} icon={<UnorderedListOutlined />}>
            更多
          </Button>
        </Dropdown>
      </Fragment>
    ) : (
      <></>
    );

  if (otherBtnList?.length > 0) {
    outsideList?.push(moreBtn);
  }

  outsideList = outsideList?.filter((itemBtn: any) => itemBtn);
  return outsideList && outsideList?.length > 0 ? outsideList : [Disable];
  // return outsideList;
};

/**
 * 展开收起全部按钮dom
 * @param listOpen 保存的state
 * @param changeOpenSetState 修改state的方法
 * @returns
 */
export const openCloseBtn = (listOpen: Record<string, any>, changeOpenSetState: (obj: Record<string, any>) => void) => {
  return (
    <Button
      className="manageBtntTxtStyle"
      type="link"
      icon={listOpen?.openIdKey?.length > 0 ? <UpCircleOutlined /> : <DownCircleOutlined />}
      size="small"
      onClick={() => {
        if (listOpen?.openIdKey?.length > 0) {
          changeOpenSetState({
            ...listOpen,
            openIdKey: [],
          });
        } else {
          const openList: string[] = [...listOpen?.allOpenKeys];
          changeOpenSetState({
            ...listOpen,
            openIdKey: openList,
          });
        }
      }}
      onMouseOut={onMouseOutBtn}
    >
      {listOpen?.openIdKey?.length > 0 ? '收起全部' : '展开全部'}
    </Button>
  );
};

/**
 * 点击单个数据展开关闭
 * @param clickKey 点击的数据ID
 */
export const clickOpenClose = (clickKey: string, allOpenChildren: Record<string, any>, changeOpenSetState: (obj: Record<string, any>) => void) => {
  if (allOpenChildren?.openIdKey?.includes(clickKey)) {
    const closeDataKeys: string[] = allOpenChildren?.openIdKey?.filter((item: any) => item != clickKey);
    const newOpenKeys: Record<string, any> = {
      ...allOpenChildren,
      openIdKey: closeDataKeys,
    };
    changeOpenSetState(newOpenKeys);
  } else {
    const openDataKeys: string[] = [...allOpenChildren?.openIdKey];
    openDataKeys?.push(clickKey);
    const newOpenKeys: Record<string, any> = {
      ...allOpenChildren,
      openIdKey: openDataKeys,
    };
    changeOpenSetState(newOpenKeys);
  }
};
